<template>
  <div class="media-detail-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-left">
          <button class="back-btn" @click="goBack">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2"/>
            </svg>
            返回
          </button>
        </div>

        <div class="header-actions">
          <button class="action-btn edit" @click="editMedia">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2"/>
              <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
            </svg>
            编辑
          </button>

          <button class="action-btn share" @click="shareMedia">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13" stroke="currentColor" stroke-width="2"/>
            </svg>
            分享
          </button>

          <button class="action-btn download" @click="downloadMedia">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
            </svg>
            下载
          </button>

          <div class="more-actions">
            <button class="action-btn more" @click="showMoreMenu = !showMoreMenu">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="19" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="5" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>

            <div v-if="showMoreMenu" class="more-menu" @click.stop>
              <button class="menu-item" @click="addToAlbum">
                <svg fill="none" viewBox="0 0 24 24">
                  <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                  <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                  <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                </svg>
                添加到相册
              </button>
              <button v-if="media?.fileType === 'image'" class="menu-item" @click="setWallpaper">
                <svg fill="none" viewBox="0 0 24 24">
                  <rect height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="20" x="2" y="3"/>
                  <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="21" y2="21"/>
                  <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="17" y2="21"/>
                </svg>
                设为壁纸
              </button>
              <button class="menu-item danger" @click="deleteMedia">
                <svg fill="none" viewBox="0 0 24 24">
                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                  <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
                </svg>
                删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div v-if="media" class="main-content">
      <div class="content-grid">
        <!-- 媒体内容区 -->
        <div class="media-content glass-card">
          <!-- 图片预览 -->
          <div v-if="media.fileType === 'image'" class="image-container">
            <div class="image-viewer">
              <img
                :alt="media.title"
                :src="media.originalUrl"
                class="main-image"
                @click="openFullscreen"
              />
              <div class="image-overlay">
                <button class="overlay-btn" @click="openFullscreen">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  全屏查看
                </button>
                <button class="overlay-btn" @click="rotateImage">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M21 12c0 5-4 9-9 9s-8.5-4-8.5-9c0-5 3.5-9 8.5-9 2.5 0 4.9 1 6.5 2.8L21 3v6h-6" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  旋转
                </button>
              </div>
            </div>
          </div>

          <!-- 视频播放器 -->
          <div v-else-if="media.fileType === 'video'" class="video-container">
            <video
              :poster="media.thumbnailUrl"
              :src="media.originalUrl"
              class="video-player"
              controls
              preload="metadata"
            >
              您的浏览器不支持视频播放。
            </video>
          </div>

          <!-- 音频播放器 -->
          <div v-else-if="media.fileType === 'audio'" class="audio-container">
            <div class="audio-player">
              <div class="audio-cover">
                <img v-if="media.coverUrl" :alt="media.title" :src="media.coverUrl" />
                <div v-else class="default-cover">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
                    <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                    <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
              </div>
              <div class="audio-info">
                <h3 class="audio-title">{{ media.title }}</h3>
                <p class="audio-artist">{{ media.artist || '未知艺术家' }}</p>
                <p class="audio-album">{{ media.album || '未知专辑' }}</p>
              </div>
            </div>
            <audio
              :src="media.originalUrl"
              class="audio-element"
              controls
              preload="metadata"
            >
              您的浏览器不支持音频播放。
            </audio>
          </div>

          <!-- 文档预览 -->
          <div v-else class="document-container">
            <div class="document-preview">
              <div class="document-icon">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                  <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <div class="document-info">
                <h3 class="document-title">{{ media.title }}</h3>
                <p class="document-type">{{ media.extension.toUpperCase() }} 文档</p>
                <p class="document-size">{{ formatFileSize(media.fileSize) }}</p>
              </div>
              <button class="preview-btn" @click="previewDocument">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                预览文档
              </button>
            </div>
          </div>

          <!-- 媒体信息 -->
          <div class="media-info-section">
            <h2 class="media-title">{{ media.title }}</h2>
            <div class="media-meta">
              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ formatDate(media.uploadedAt) }}</span>
              </div>
              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ media.uploader || '我' }}</span>
              </div>
              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ formatFileSize(media.fileSize) }}</span>
              </div>
              <div v-if="media.dimensions" class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M2 3h20v4H2zM2 17h20v4H2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ media.dimensions }}</span>
              </div>
            </div>

            <!-- 描述 -->
            <div v-if="media.description" class="media-description">
              <h3 class="description-title">描述</h3>
              <p class="description-text">{{ media.description }}</p>
            </div>

            <!-- 标签 -->
            <div v-if="media.tags && media.tags.length > 0" class="media-tags">
              <h3 class="tags-title">标签</h3>
              <div class="tags-container">
                <button
                  v-for="tag in media.tags"
                  :key="tag"
                  class="tag-item"
                  @click="searchByTag(tag)"
                >
                  {{ tag }}
                </button>
              </div>
            </div>

            <!-- 位置信息 -->
            <div v-if="media.location" class="media-location">
              <h3 class="location-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                拍摄位置
              </h3>
              <p class="location-text">{{ media.location }}</p>
              <button class="map-btn" @click="showOnMap">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z" stroke="currentColor" stroke-width="2"/>
                  <polyline points="8,2 8,18" stroke="currentColor" stroke-width="2"/>
                  <polyline points="16,6 16,22" stroke="currentColor" stroke-width="2"/>
                </svg>
                在地图上查看
              </button>
            </div>

            <!-- 互动按钮 -->
            <div class="media-actions">
              <button :class="{ active: isLiked }" class="media-action like" @click="toggleLike">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ likeCount }}</span>
              </button>

              <button class="media-action comment" @click="focusComment">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ comments.length }}</span>
              </button>

              <button :class="{ active: isBookmarked }" class="media-action bookmark" @click="toggleBookmark">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="media-sidebar">
          <!-- 技术信息 -->
          <div class="tech-info-card glass-card">
            <h3 class="card-title">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                <line stroke="currentColor" stroke-width="2" x1="2" x2="6" y1="12" y2="12"/>
                <line stroke="currentColor" stroke-width="2" x1="18" x2="22" y1="12" y2="12"/>
                <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="2" y2="6"/>
                <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="18" y2="22"/>
              </svg>
              技术信息
            </h3>
            <div class="tech-details">
              <div class="tech-item">
                <span class="tech-label">文件名</span>
                <span class="tech-value">{{ media.originalName }}</span>
              </div>
              <div class="tech-item">
                <span class="tech-label">格式</span>
                <span class="tech-value">{{ media.extension.toUpperCase() }}</span>
              </div>
              <div class="tech-item">
                <span class="tech-label">大小</span>
                <span class="tech-value">{{ formatFileSize(media.fileSize) }}</span>
              </div>
              <div v-if="media.dimensions" class="tech-item">
                <span class="tech-label">分辨率</span>
                <span class="tech-value">{{ media.dimensions }}</span>
              </div>
              <div v-if="media.duration" class="tech-item">
                <span class="tech-label">时长</span>
                <span class="tech-value">{{ formatDuration(media.duration) }}</span>
              </div>
              <div v-if="media.colorSpace" class="tech-item">
                <span class="tech-label">色彩空间</span>
                <span class="tech-value">{{ media.colorSpace }}</span>
              </div>
            </div>
          </div>

          <!-- 相关媒体 -->
          <div class="related-media-card glass-card">
            <h3 class="card-title">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2"/>
              </svg>
              相关内容
            </h3>
            <div class="related-list">
              <div
                v-for="related in relatedMedia"
                :key="related.id"
                class="related-item"
                @click="openMedia(related.id)"
              >
                <div class="related-thumbnail">
                  <img v-if="related.thumbnailUrl" :alt="related.title" :src="related.thumbnailUrl" />
                  <div v-else :class="related.fileType" class="related-icon">
                    <svg fill="none" viewBox="0 0 24 24">
                      <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                    </svg>
                  </div>
                </div>
                <div class="related-content">
                  <h4 class="related-title">{{ related.title }}</h4>
                  <p class="related-meta">{{ formatDate(related.uploadedAt) }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作历史 -->
          <div class="activity-card glass-card">
            <h3 class="card-title">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
              </svg>
              操作历史
            </h3>
            <div class="activity-list">
              <div
                v-for="activity in activities"
                :key="activity.id"
                class="activity-item"
              >
                <div :class="activity.type" class="activity-icon">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
                <div class="activity-content">
                  <p class="activity-text">{{ activity.description }}</p>
                  <span class="activity-time">{{ formatDate(activity.createdAt) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论区 -->
      <div class="comments-section">
        <h3 class="comments-title">
          评论 ({{ comments.length }})
        </h3>

        <!-- 评论输入 -->
        <div class="comment-form">
          <div class="comment-input-group">
            <div class="user-avatar">
              <img :alt="currentUser.name" :src="currentUser.avatar || '/default-avatar.png'" />
            </div>
            <div class="comment-input-wrapper">
              <textarea
                ref="commentInput"
                v-model="newComment"
                class="comment-input"
                placeholder="写下你的想法..."
                rows="2"
              ></textarea>
              <div class="comment-actions">
                <button
                  :disabled="!newComment.trim()"
                  class="submit-comment"
                  @click="submitComment"
                >
                  发布
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 评论列表 -->
        <div class="comments-list">
          <div
            v-for="comment in comments"
            :key="comment.id"
            class="comment-item"
          >
            <div class="comment-avatar">
              <img :alt="comment.user.name" :src="comment.user.avatar || '/default-avatar.png'" />
            </div>
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.user.name }}</span>
                <span class="comment-time">{{ formatDate(comment.createdAt) }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-footer">
                <button
                  :class="{ active: comment.liked }"
                  class="comment-action like"
                  @click="toggleCommentLike(comment)"
                >
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <span>{{ comment.likes }}</span>
                </button>
                <button class="comment-action reply" @click="replyToComment(comment)">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  回复
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-state">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <p class="loading-text">正在加载媒体...</p>
      </div>
    </div>

    <!-- 全屏图片查看器 -->
    <div v-if="showFullscreen && media?.fileType === 'image'" class="fullscreen-viewer" @click="closeFullscreen">
      <div class="viewer-container" @click.stop>
        <div class="viewer-header">
          <h3 class="viewer-title">{{ media.title }}</h3>
          <button class="viewer-close" @click="closeFullscreen">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="viewer-content">
          <img
            :alt="media.title"
            :src="media.originalUrl"
            :style="{ transform: `rotate(${rotation}deg)` }"
            class="fullscreen-image"
          />
        </div>
        <div class="viewer-controls">
          <button class="viewer-control" @click="rotateImage">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 12c0 5-4 9-9 9s-8.5-4-8.5-9c0-5 3.5-9 8.5-9 2.5 0 4.9 1 6.5 2.8L21 3v6h-6" stroke="currentColor" stroke-width="2"/>
            </svg>
            旋转
          </button>
          <button class="viewer-control" @click="downloadMedia">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
            </svg>
            下载
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const route = useRoute()
const router = useRouter()

interface MediaItem {
  id: string
  title: string
  description?: string
  fileType: 'image' | 'video' | 'audio' | 'document'
  extension: string
  originalName: string
  thumbnailUrl?: string
  originalUrl: string
  coverUrl?: string
  fileSize: number
  dimensions?: string
  duration?: number
  colorSpace?: string
  uploader?: string
  uploadedAt: Date
  tags: string[]
  location?: string
  artist?: string
  album?: string
}

interface Comment {
  id: string
  user: {
    id: string
    name: string
    avatar?: string
  }
  content: string
  likes: number
  liked: boolean
  createdAt: Date
}

interface Activity {
  id: string
  type: 'upload' | 'edit' | 'share' | 'download'
  description: string
  createdAt: Date
}

// 响应式数据
const media = ref<MediaItem | null>(null)
const relatedMedia = ref<MediaItem[]>([])
const comments = ref<Comment[]>([])
const activities = ref<Activity[]>([])
const showFullscreen = ref(false)
const showMoreMenu = ref(false)
const rotation = ref(0)
const newComment = ref('')
const commentInput = ref<HTMLTextAreaElement>()
const isLiked = ref(false)
const isBookmarked = ref(false)
const likeCount = ref(15)

const currentUser = ref({
  id: '1',
  name: '我',
  avatar: '/default-avatar.png'
})

// 页面初始化
onMounted(() => {
  loadMedia()
  loadComments()
  loadRelatedMedia()
  loadActivities()

  // 点击其他地方关闭更多菜单
  document.addEventListener('click', () => {
    showMoreMenu.value = false
  })
})

// 数据加载
const loadMedia = async () => {
  const mediaId = route.params.id as string

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))

    // 根据ID模拟不同类型的媒体
    const mediaTypes = ['image', 'video', 'audio', 'document']
    const randomType = mediaTypes[Math.floor(Math.random() * mediaTypes.length)] as 'image' | 'video' | 'audio' | 'document'

    media.value = {
      id: mediaId,
      title: '美好的家庭时光',
      description: '这是我们一家人在公园里度过的美好时光，孩子们玩得很开心，阳光正好，微风不燥。',
      fileType: randomType,
      extension: randomType === 'image' ? 'jpg' : randomType === 'video' ? 'mp4' : randomType === 'audio' ? 'mp3' : 'pdf',
      originalName: `family-${randomType}.${randomType === 'image' ? 'jpg' : randomType === 'video' ? 'mp4' : randomType === 'audio' ? 'mp3' : 'pdf'}`,
      thumbnailUrl: randomType !== 'document' ? 'https://images.unsplash.com/photo-1551632811-561732d1e306?w=800&h=600&fit=crop' : undefined,
      originalUrl: randomType !== 'document' ? 'https://images.unsplash.com/photo-1551632811-561732d1e306?w=1200&h=800&fit=crop' : '#',
      coverUrl: randomType === 'audio' ? 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=400&fit=crop' : undefined,
      fileSize: Math.floor(Math.random() * 10000000) + 1000000,
      dimensions: randomType === 'image' || randomType === 'video' ? '1920 × 1080' : undefined,
      duration: randomType === 'video' || randomType === 'audio' ? 180 : undefined,
      colorSpace: randomType === 'image' ? 'sRGB' : undefined,
      uploader: '爸爸',
      uploadedAt: new Date('2024-01-20T15:30:00'),
      tags: ['家庭', '公园', '孩子', '快乐', '周末'],
      location: '中山公园',
      artist: randomType === 'audio' ? '未知艺术家' : undefined,
      album: randomType === 'audio' ? '家庭音乐收藏' : undefined
    }
  } catch (error) {
    console.error('加载媒体失败:', error)
    Notify({
      type: 'error',
      message: '加载媒体失败，请重试',
      position: 'top-right'
    })
  }
}

const loadComments = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 300))

    comments.value = [
      {
        id: '1',
        user: {
          id: '2',
          name: '妈妈',
          avatar: '/default-avatar.png'
        },
        content: '这张照片太美了！那天的天气真的很好，孩子们玩得很开心。',
        likes: 5,
        liked: false,
        createdAt: new Date('2024-01-20T16:00:00')
      },
      {
        id: '2',
        user: {
          id: '3',
          name: '小明',
          avatar: '/default-avatar.png'
        },
        content: '我记得这一天！我们还喂了鸭子，超级好玩的！',
        likes: 3,
        liked: true,
        createdAt: new Date('2024-01-20T18:30:00')
      }
    ]
  } catch (error) {
    console.error('加载评论失败:', error)
  }
}

const loadRelatedMedia = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 200))

    relatedMedia.value = [
      {
        id: '2',
        title: '公园散步',
        fileType: 'image',
        thumbnailUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
        uploadedAt: new Date('2024-01-19T14:20:00')
      },
      {
        id: '3',
        title: '家庭聚餐',
        fileType: 'video',
        thumbnailUrl: 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=400&h=300&fit=crop',
        uploadedAt: new Date('2024-01-18T19:15:00')
      }
    ] as MediaItem[]
  } catch (error) {
    console.error('加载相关媒体失败:', error)
  }
}

const loadActivities = async () => {
  try {
    activities.value = [
      {
        id: '1',
        type: 'upload',
        description: '上传了媒体文件',
        createdAt: new Date('2024-01-20T15:30:00')
      },
      {
        id: '2',
        type: 'edit',
        description: '编辑了标题和描述',
        createdAt: new Date('2024-01-20T16:15:00')
      },
      {
        id: '3',
        type: 'share',
        description: '分享给了家庭成员',
        createdAt: new Date('2024-01-20T17:00:00')
      }
    ]
  } catch (error) {
    console.error('加载活动历史失败:', error)
  }
}

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (date: Date): string => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days} 天前`

  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 事件处理
const goBack = () => {
  router.back()
}

const editMedia = () => {
  Notify({
    type: 'info',
    message: '编辑功能开发中...',
    position: 'top-right'
  })
}

const shareMedia = () => {
  console.log('分享媒体:', media.value?.title)
  Notify({
    type: 'success',
    message: '分享链接已复制到剪贴板',
    position: 'top-right'
  })
}

const downloadMedia = async () => {
  try {
    Notify({
      type: 'info',
      message: '开始下载...',
      position: 'top-right'
    })

    // 模拟下载过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    Notify({
      type: 'success',
      message: '下载完成',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '下载失败，请重试',
      position: 'top-right'
    })
  }
}

const addToAlbum = () => {
  showMoreMenu.value = false
  Notify({
    type: 'success',
    message: '已添加到相册',
    position: 'top-right'
  })
}

const setWallpaper = () => {
  showMoreMenu.value = false
  Notify({
    type: 'info',
    message: '壁纸设置功能开发中...',
    position: 'top-right'
  })
}

const deleteMedia = () => {
  showMoreMenu.value = false
  if (confirm('确定要删除这个媒体文件吗？删除后无法恢复。')) {
    Notify({
      type: 'success',
      message: '媒体已删除',
      position: 'top-right'
    })
    router.push('/media')
  }
}

const searchByTag = (tag: string) => {
  router.push(`/media?search=${encodeURIComponent(tag)}`)
}

const showOnMap = () => {
  Notify({
    type: 'info',
    message: '地图功能开发中...',
    position: 'top-right'
  })
}

const openMedia = (mediaId: string) => {
  router.push(`/media/${mediaId}`)
}

const previewDocument = () => {
  Notify({
    type: 'info',
    message: '文档预览功能开发中...',
    position: 'top-right'
  })
}

// 图片操作
const openFullscreen = () => {
  showFullscreen.value = true
  document.body.style.overflow = 'hidden'
}

const closeFullscreen = () => {
  showFullscreen.value = false
  document.body.style.overflow = ''
}

const rotateImage = () => {
  rotation.value += 90
  if (rotation.value >= 360) rotation.value = 0
}

// 互动功能
const toggleLike = () => {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    likeCount.value++
  } else {
    likeCount.value--
  }
}

const toggleBookmark = () => {
  isBookmarked.value = !isBookmarked.value
  Notify({
    type: 'success',
    message: isBookmarked.value ? '已收藏' : '已取消收藏',
    position: 'top-right'
  })
}

// 评论功能
const focusComment = () => {
  commentInput.value?.focus()
}

const submitComment = async () => {
  if (!newComment.value.trim()) return

  try {
    const comment: Comment = {
      id: Date.now().toString(),
      user: {
        id: currentUser.value.id,
        name: currentUser.value.name,
        avatar: currentUser.value.avatar
      },
      content: newComment.value.trim(),
      likes: 0,
      liked: false,
      createdAt: new Date()
    }

    comments.value.unshift(comment)
    newComment.value = ''

    Notify({
      type: 'success',
      message: '评论发布成功',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '评论发布失败，请重试',
      position: 'top-right'
    })
  }
}

const toggleCommentLike = (comment: Comment) => {
  comment.liked = !comment.liked
  if (comment.liked) {
    comment.likes++
  } else {
    comment.likes--
  }
}

const replyToComment = (comment: Comment) => {
  newComment.value = `@${comment.user.name} `
  focusComment()
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/glassmorphism.scss';

.media-detail-view {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;

  .glass-card {
    @include glass-card;
    margin-bottom: 2rem;
  }

  .page-header {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .header-content {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1.5rem 2rem;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

      .header-left {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.25rem;
          background: rgba(255, 255, 255, 0.15);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);

          &:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.25rem;
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 0.9rem;
          font-weight: 500;
          backdrop-filter: blur(10px);

          svg {
            width: 16px;
            height: 16px;
          }

          &.edit {
            background: rgba(59, 130, 246, 0.2);
            color: white;
            border-color: rgba(59, 130, 246, 0.3);

            &:hover {
              background: rgba(59, 130, 246, 0.3);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
            }
          }

          &.share {
            background: rgba(16, 185, 129, 0.2);
            color: white;
            border-color: rgba(16, 185, 129, 0.3);

            &:hover {
              background: rgba(16, 185, 129, 0.3);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
            }
          }

          &.download {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;

            &:hover {
              background: rgba(245, 158, 11, 0.2);
            }
          }
        }

        .more-actions {
          position: relative;

          .action-btn.more {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border-color: rgba(255, 255, 255, 0.2);

            &:hover {
              background: rgba(255, 255, 255, 0.25);
              transform: translateY(-2px);
            }
          }

          .more-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 0.5rem;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            min-width: 140px;
            z-index: 10;

            .menu-item {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              width: 100%;
              padding: 0.75rem 1rem;
              background: none;
              border: none;
              text-align: left;
              cursor: pointer;
              transition: all 0.2s ease;
              font-size: 0.9rem;
              color: #374151;

              &:hover {
                background: rgba(59, 130, 246, 0.1);
                color: #2563eb;
              }

              &.danger {
                color: #ef4444;

                &:hover {
                  background: rgba(239, 68, 68, 0.1);
                  color: #dc2626;
                }
              }

              svg {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .content-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 2rem;

      @media (max-width: 1024px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .media-content {
    @include glass-card;
    overflow: hidden;

    .image-container {
      position: relative;

      .image-viewer {
        position: relative;
        background: #000;

        .main-image {
          width: 100%;
          height: auto;
          display: block;
          cursor: pointer;
        }

        .image-overlay {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          opacity: 0;
          transition: opacity 0.3s ease;

          .overlay-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: rgba(255, 255, 255, 0.9);
            color: #1e293b;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;

            &:hover {
              background: white;
              transform: translateY(-2px);
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }

        &:hover .image-overlay {
          opacity: 1;
        }
      }
    }

    .video-container {
      .video-player {
        width: 100%;
        height: auto;
        background: #000;
      }
    }

    .audio-container {
      padding: 2rem;

      .audio-player {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;

        .audio-cover {
          width: 120px;
          height: 120px;
          border-radius: 8px;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .default-cover {
            width: 100%;
            height: 100%;
            background: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;

            svg {
              width: 40px;
              height: 40px;
            }
          }
        }

        .audio-info {
          flex: 1;

          .audio-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.5rem 0;
          }

          .audio-artist,
          .audio-album {
            color: #6b7280;
            margin: 0 0 0.25rem 0;
          }
        }
      }

      .audio-element {
        width: 100%;
      }
    }

    .document-container {
      padding: 2rem;
      text-align: center;

      .document-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        .document-icon {
          width: 80px;
          height: 80px;
          background: #f3f4f6;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;

          svg {
            width: 40px;
            height: 40px;
          }
        }

        .document-info {
          .document-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.5rem 0;
          }

          .document-type,
          .document-size {
            color: #6b7280;
            margin: 0 0 0.25rem 0;
          }
        }

        .preview-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          background: #3b82f6;
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-weight: 500;

          &:hover {
            background: #2563eb;
            transform: translateY(-2px);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .media-info-section {
      padding: 2rem;

      .media-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 1rem 0;
      }

      .media-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 2rem;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.9rem;
          color: #6b7280;

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .media-description {
        margin-bottom: 2rem;

        .description-title {
          font-size: 1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.75rem 0;
        }

        .description-text {
          color: #374151;
          line-height: 1.6;
          margin: 0;
        }
      }

      .media-tags {
        margin-bottom: 2rem;

        .tags-title {
          font-size: 1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.75rem 0;
        }

        .tags-container {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;

          .tag-item {
            padding: 0.25rem 0.75rem;
            background: rgba(59, 130, 246, 0.1);
            color: #2563eb;
            border: none;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: rgba(59, 130, 246, 0.2);
              transform: translateY(-1px);
            }
          }
        }
      }

      .media-location {
        margin-bottom: 2rem;

        .location-title {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.75rem 0;

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .location-text {
          color: #374151;
          margin: 0 0 1rem 0;
        }

        .map-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: rgba(16, 185, 129, 0.1);
          color: #10b981;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 0.9rem;
          font-weight: 500;

          &:hover {
            background: rgba(16, 185, 129, 0.2);
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }

      .media-actions {
        display: flex;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid #f1f5f9;

        .media-action {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1rem;
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 0.9rem;
          font-weight: 500;
          color: #6b7280;

          svg {
            width: 16px;
            height: 16px;
          }

          &.like {
            &:hover {
              background: rgba(239, 68, 68, 0.1);
              border-color: #fecaca;
              color: #dc2626;
            }

            &.active {
              background: rgba(239, 68, 68, 0.1);
              border-color: #fecaca;
              color: #dc2626;
            }
          }

          &.comment {
            &:hover {
              background: rgba(59, 130, 246, 0.1);
              border-color: #bfdbfe;
              color: #2563eb;
            }
          }

          &.bookmark {
            &:hover {
              background: rgba(16, 185, 129, 0.1);
              border-color: #a7f3d0;
              color: #059669;
            }

            &.active {
              background: rgba(16, 185, 129, 0.1);
              border-color: #a7f3d0;
              color: #059669;
            }
          }
        }
      }
    }
  }

  .media-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (max-width: 1024px) {
      margin-top: 2rem;
    }

    .tech-info-card,
    .related-media-card,
    .activity-card {
      @include glass-card;
      padding: 1.5rem;

      .card-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        margin: 0 0 1rem 0;

        svg {
          width: 16px;
          height: 16px;
          color: #6b7280;
        }
      }
    }

    .tech-info-card {
      .tech-details {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        .tech-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem 0;

          &:not(:last-child) {
            border-bottom: 1px solid #f1f5f9;
          }

          .tech-label {
            font-size: 0.9rem;
            color: #6b7280;
          }

          .tech-value {
            font-size: 0.9rem;
            font-weight: 500;
            color: #1e293b;
          }
        }
      }
    }

    .related-media-card {
      .related-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        .related-item {
          display: flex;
          gap: 0.75rem;
          padding: 0.75rem;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.2s ease;

          &:hover {
            background: #f8fafc;
          }

          .related-thumbnail {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .related-icon {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #f3f4f6;
              color: #6b7280;

              &.image {
                background: rgba(59, 130, 246, 0.1);
                color: #3b82f6;
              }

              &.video {
                background: rgba(239, 68, 68, 0.1);
                color: #ef4444;
              }

              svg {
                width: 20px;
                height: 20px;
              }
            }
          }

          .related-content {
            flex: 1;
            min-width: 0;

            .related-title {
              font-size: 0.9rem;
              font-weight: 500;
              color: #1e293b;
              margin: 0 0 0.25rem 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .related-meta {
              font-size: 0.8rem;
              color: #6b7280;
              margin: 0;
            }
          }
        }
      }
    }

    .activity-card {
      .activity-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        .activity-item {
          display: flex;
          gap: 0.75rem;

          .activity-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            &.upload {
              background: rgba(59, 130, 246, 0.1);
              color: #3b82f6;
            }

            &.edit {
              background: rgba(16, 185, 129, 0.1);
              color: #10b981;
            }

            &.share {
              background: rgba(245, 158, 11, 0.1);
              color: #f59e0b;
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }

          .activity-content {
            flex: 1;

            .activity-text {
              font-size: 0.9rem;
              color: #1e293b;
              margin: 0 0 0.25rem 0;
            }

            .activity-time {
              font-size: 0.8rem;
              color: #6b7280;
            }
          }
        }
      }
    }
  }

  .comments-section {
    max-width: 1200px;
    margin: 2rem auto 0;
    @include glass-card;
    padding: 1.5rem;

    .comments-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 1.5rem 0;
    }

    .comment-form {
      margin-bottom: 1.5rem;

      .comment-input-group {
        display: flex;
        gap: 1rem;

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .comment-input-wrapper {
          flex: 1;

          .comment-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;
            resize: vertical;
            min-height: 80px;

            &:focus {
              outline: none;
              border-color: #3b82f6;
              box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
          }

          .comment-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.75rem;

            .submit-comment {
              padding: 0.5rem 1rem;
              background: #3b82f6;
              color: white;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              transition: all 0.2s ease;
              font-weight: 500;

              &:hover:not(:disabled) {
                background: #2563eb;
              }

              &:disabled {
                opacity: 0.6;
                cursor: not-allowed;
              }
            }
          }
        }
      }
    }

    .comments-list {
      .comment-item {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;

        &:not(:last-child) {
          border-bottom: 1px solid #f1f5f9;
        }

        .comment-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .comment-content {
          flex: 1;

          .comment-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.5rem;

            .comment-author {
              font-weight: 500;
              color: #1e293b;
            }

            .comment-time {
              font-size: 0.8rem;
              color: #6b7280;
            }
          }

          .comment-text {
            color: #374151;
            line-height: 1.5;
            margin: 0 0 0.75rem 0;
          }

          .comment-footer {
            display: flex;
            gap: 1rem;

            .comment-action {
              display: flex;
              align-items: center;
              gap: 0.25rem;
              padding: 0.25rem 0.5rem;
              background: none;
              border: none;
              border-radius: 4px;
              cursor: pointer;
              transition: all 0.2s ease;
              font-size: 0.8rem;
              color: #6b7280;

              &:hover {
                background: #f3f4f6;
              }

              &.like.active {
                color: #dc2626;
              }

              svg {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }
    }
  }

  .loading-state {
    max-width: 1200px;
    margin: 0 auto;
    @include glass-card;
    padding: 3rem 2rem;
    text-align: center;

    .loading-content {
      .loading-spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto 1rem;
        border: 3px solid #f1f5f9;
        border-top: 3px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .loading-text {
        color: white;
        font-size: 1rem;
        margin: 0;
      }
    }
  }

  .fullscreen-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .viewer-container {
      position: relative;
      width: 90vw;
      height: 90vh;
      display: flex;
      flex-direction: column;

      .viewer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        color: white;

        .viewer-title {
          font-size: 1.1rem;
          font-weight: 500;
          margin: 0;
        }

        .viewer-close {
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.1);
          border: none;
          border-radius: 50%;
          color: white;
          cursor: pointer;
          transition: background 0.2s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }

          svg {
            width: 20px;
            height: 20px;
          }
        }
      }

      .viewer-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;

        .fullscreen-image {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          transition: transform 0.3s ease;
        }
      }

      .viewer-controls {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;

        .viewer-control {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1rem;
          background: rgba(255, 255, 255, 0.1);
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.2s ease;
          font-weight: 500;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .media-detail-view {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;

      .header-actions {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    .main-content .content-grid {
      grid-template-columns: 1fr;
    }

    .media-content .media-info-section .media-meta {
      flex-direction: column;
      gap: 0.75rem;
    }

    .comments-section .comment-form .comment-input-group {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;

      .user-avatar {
        align-self: flex-start;
      }
    }

    .fullscreen-viewer .viewer-container {
      width: 95vw;
      height: 95vh;

      .viewer-controls {
        flex-wrap: wrap;
      }
    }
  }
}
</style>
